<template>
	<div class="j-transplant">
		<j-header :indexNum="5"></j-header>
		<div class="jc-banner"></div>
		<div class="nav-title">
			<div class="container clearfix">
				<div class="nav-text pull-left">移植合作医院</div>
				<div class="nav-link pull-left">
					<router-link to="/">首页 </router-link>/
					<span>产品服务 </span>/
					<span>移植合作医院 </span>
				</div>
			</div>
		</div>
		<div class="jc-content">
			<div class="container">
				<ul class="jc-nav-tag clearfix">
					<li class="tag" @click="toggleTab(1)" :class="{navActive:1 == num}">华东</li>
					<li class="tag" @click="toggleTab(2)" :class="{navActive:2 == num}">华北</li>
					<li class="tag" @click="toggleTab(3)" :class="{navActive:3 == num}">华中</li>
					<li class="tag" @click="toggleTab(4)" :class="{navActive:4 == num}">华南</li>
					<li class="tag" @click="toggleTab(5)" :class="{navActive:5 == num}">东北</li>
					<li class="tag" @click="toggleTab(6)" :class="{navActive:6 == num}">西北</li>
					<li class="tag" @click="toggleTab(7)" :class="{navActive:7 == num}">西南</li>
				</ul>
				<ul class="jc-nav-tag jc-nav-tag2 clearfix">
					<li class="tag" v-bind:style="{ marginLeft: marginLeft}">
						<span class="saojiao"></span>
					</li>
				</ul>
				<div class="jc-list">
					<!--华东-->
					<div class="item" v-if="itemNum === 1">
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>上海</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>复旦大学附属儿科医院</p>
								</div>
								<div>
									<p>上海市第一人民医院</p>
								</div>
								<div class="item-weight">
									<p>上海道培医院</p>
								</div>
								<div class="item-line2">
									<p>上海瑞金医院</p>
								</div>
								<div class="item-line2">
									<p>上海儿童医学中心</p>
								</div>
								<div class="item-line2 item-weight">
									<p>上海新华医院</p>
								</div>
								<div class="item-line2">
									<p>上海长海医院</p>
								</div>
								<div class="item-line2">
									<p>上海市儿童医院</p>
								</div>
								<div class="item-line2 item-weight">
									<p>上海同济医院</p>
								</div>
								<div class="item-line2">
									<p>上海中山医院</p>
								</div>
								<div class="item-line2">
									<p>上海华东医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>浙江</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>浙江大学医学院附属第一医院 </p>
								</div>
								<div>
									<p>浙江大学医学院附属儿童医院</p>
								</div>
								<div class="item-weight">
									<p>浙江省中医院</p>
								</div>
								<div class="item-line2">
									<p>浙江大学医学院附属第二医院</p>
								</div>
								<div class="item-line2">
									<p>浙江省人民医院</p>
								</div>
								<div class="item-line2 item-weight">
									<p>宁波市第一医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>江苏</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>苏州大学附属第一医院</p>
								</div>
								<div>
									<p>南京鼓楼医院</p>
								</div>
								<div class="item-weight">
									<p>淮安市第二人民医院</p>
								</div>
								<div class="item-line2">
									<p>苏州大学附属儿童医院</p>
								</div>
								<div class="item-line2">
									<p>常州市第一人民医院</p>
								</div>
								<div class="item-line2 item-weight">
									<p>南京军区南京总医院</p>
								</div>
								<div class="item-line2">
									<p>江苏省人民医院</p>
								</div>
								<div class="item-line2">
									<p>淮安市第一人民医院</p>
								</div>
								<div class="item-line2 item-weight">
									<p>江苏省苏北人民医院</p>
								</div>
								<div class="item-line2">
									<p>南京中大医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>安徽</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>安徽省立医院</p>
								</div>
								<div>
									<p>安徽医科大学第一附属医院</p>
								</div>
								<div class="item-weight">
									<p>皖南医学院弋矶山医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left">
								<img src="../../assets/address-logo.png" alt="">
								<p>山东</p>
							</div>
							<div class="item-right">
								<div>
									<p>济南军区总医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left">
								<img src="../../assets/address-logo.png" alt="">
								<p>福建</p>
							</div>
							<div class="item-right">
								<div>
									<p>福建医科大学附属协和医院</p>
								</div>
							</div>
						</div>
					</div>
					<!--华北-->
					<div class="item" v-else-if="itemNum === 2">
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>北京</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>中国解放军307医院</p>
								</div>
								<div>
									<p>中国人民解放军海军总医院</p>
								</div>
								<div class="item-weight">
									<p>陆军总医院附属八一儿童医院</p>
								</div>
								<div class="item-line2">
									<p>北京儿童医院</p>
								</div>
								<div class="item-line2">
									<p>北京大学人民医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>天津</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>中科院血液病医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>河北</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>解放军251医院 </p>
								</div>
								<div>
									<p>燕达陆道培血液肿瘤中心</p>
								</div>
							</div>
						</div>
					</div>
					<!--华中-->
					<div class="item" v-else-if="itemNum === 3">
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>河南</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>河南科技大学第一附属医院</p>
								</div>
								<div>
									<p>郑州市第三人民医院</p>
								</div>
								<div class="item-weight">
									<p>郑州大学第一附属医院</p>
								</div>
								<div class="item-line2">
									<p>河南省肿瘤医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>湖南</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>中南大学湘雅医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>湖北</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>武汉市中心医院</p>
								</div>
								<div>
									<p>武汉同济医院</p>
								</div>
								<div class="item-weight">
									<p>武汉协和医院</p>
								</div>
								<div class="item-line2">
									<p>武汉市妇女儿童医疗中心</p>
								</div>
							</div>
						</div>
					</div>
					<!--华南-->
					<div class="item" v-else-if="itemNum === 4">
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>广东</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>中山大学附属第三医院</p>
								</div>
								<div>
									<p>南方医科大学南方医院</p>
								</div>
								<div class="item-weight">
									<p>中山大学孙逸仙纪念医院</p>
								</div>
								<div class="item-line2">
									<p>中山大学附属第二医院</p>
								</div>
								<div class="item-line2">
									<p>广州市妇女儿童医疗中心</p>
								</div>
								<div class="item-line2 item-weight">
									<p>南方医科大学珠江医院</p>
								</div>
								<div class="item-line2">
									<p>广东省中山市人民医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>广西</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>解放军303医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>海南</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>解放军301医院海南分院</p>
								</div>
							</div>
						</div>
					</div>
					<!--东北-->
					<div class="item" v-else-if="itemNum === 5">
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>辽宁</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>
										解放军463医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>吉林</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>
										吉林大学白求恩医院</p>
								</div>
							</div>
						</div>
					</div>
					<!--西北-->
					<div class="item" v-else-if="itemNum === 6">
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>陕西</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>西安交大第二附属医院</p>
								</div>
								<div>
									<p>第四军医大学附属唐都医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>甘肃</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>兰州军区兰州总医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>新疆</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>新疆伊宁市人民医院</p>
								</div>
							</div>
						</div>
					</div>
					<!--西南-->
					<div class="item" v-else>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>重庆</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>重庆新桥医院</p>
								</div>
								<div>
									<p>重庆医科大学附属第一医院</p>
								</div>
								<div class="item-weight">
									<p>重庆医科大学附属儿童医院</p>
								</div>
								<div class="item-line2">
									<p>重庆医科大学附属第二医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>四川</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>中国人民解放军成都军区总医院</p>
								</div>
								<div>
									<p>四川大学华西医院上锦院区</p>
								</div>
								<div class="item-weight">
									<p>四川华西第二医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>贵州</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>贵阳医学院附属医院</p>
								</div>
							</div>
						</div>
						<div class="item-add clearfix">
							<div class="item-left clearfix">
								<img src="../../assets/address-logo.png" alt="">
								<p>云南</p>
							</div>
							<div class="item-right clearfix">
								<div>
									<p>云南省第一人民医院</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<j-footer></j-footer>
	</div>
</template>
<script>
import JHeader from '../../components/Header.vue'
import JFooter from '../../components/Footer.vue'
export default {
  components: {
    JHeader, JFooter
  },
  data () {
    return {
      num: 1,
      itemNum: 1,
      marginLeft: '0'
    }
  },
  methods: {
    toggleTab (index) {
      this.num = index
      this.itemNum = index
      this.marginLeft = (index - 1) * 14.2857 + '%'
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	.j-transplant{
		.jc-banner {
			height: 150px;
			background: url(../../assets/banner/banner03.jpg) center top no-repeat;
		}
		.jc-content{
			margin: 30px auto 100px 30px;
			.jc-nav-tag{
				background-color: #02adef;
				margin-bottom: 0;
				li{
					float: left;
					width: 14.2857%;
					text-align: center;
					line-height: 40px;
					font-weight: bold;
					color: #ffffff;
					cursor: pointer;
				}
				.navActive{
					background-color: #6ac4ee;
				}
			}
			.jc-nav-tag2{
				background-color: #ffffff;
				li{
					position: relative;
					float: left;
					width: 14.2857%;
					text-align: center;
					font-weight: bold;
					color: #ffffff;
					cursor: pointer;
					height: 10px;
				}
				.saojiao{
					position: absolute;
					top: 0;
					left: 50%;
					margin-left: -8px;
					width: 0;
					height: 0;
					border-left: 8px solid transparent;
					border-right: 8px solid transparent;
					border-top: 8px solid #6ac4ee;
				}
			}
			.jc-list{
				margin-top: 40px;
				.item{
					.item-add{
						display: flex;
						border: 1px solid #ddd;
						margin: 15px auto;
						border-radius: 8px 8px;
						.item-left{
							float: left;
							width: 14%;
							text-align: center;
						}
						.item-right{
							float: left;
							width: 86%;
							padding: 40px 0 20px 0;
							div{
								float: left;
								/*width: 31%;*/
								width: 33.333333%;
								padding: 0 11px;
								margin-bottom: 20px;
								min-height: 20px;
								p{
									margin-bottom: 0;
								}
							}
							.item-weight{
								/*width: 38%;*/
							}
							.item-line2{
								/*margin-top: 20px;*/
							}
						}
					}
				}
			}
		}
	}
	@media (max-width: 991px){
		.j-transplant{
			.jc-content{
				margin: 30px auto;
				.jc-list{
					.item{
						.item-add{
							display: flex;
							.item-right{
								div{
									width: 50%;
								}
							}
						}
					}
				}
			}
		}
	}
	@media (max-width: 767px){
		.j-transplant{
			.jc-content{
				margin: 30px auto;
				.jc-list{
					margin-top: 40px;
					.item{
						.item-add{
							display: flex;
							.item-left{
								width: 20%;
							}
							.item-right{
								width: 80%;
								div{
									width:100%;
								}
							}
						}
					}
				}
			}
		}
	}
</style>